<template>
  <view class="content">
    <navbars />
    <!-- 商品列表渲染 -->
    <u-navbar
      title="我的购物车"
      leftIconColor="#f8f8f8"
      :placeholder="true"
      bgColor="#f8f8f8"
    >
      <template #left>
        <navigator url="/pages/cart/index" open-type="switchTab">
          <img src="/static/zuo1.png" alt="" class="goback" @click="goback" />
        </navigator>
      </template>
    </u-navbar>
    <view class="hander">新农人农庄</view>
    <view class="goods-list">
      <u-swipe-action>
        <u-swipe-action-item
          style="margin: 20rpx"
          v-for="item in cartList"
          @click="swiperItemClick"
          :options="options"
          :name="item.goods_id"
          :key="item.goods_id"
        >
          <view class="cart-item">
            <!-- radio 小程序组件库自带的 小选框 -->
            <radio
              @click="changeSelect(item.goods_id)"
              :checked="item.goods_select"
              color="#eea427"
            />
            <view class="cart-count">
              <!-- u-number-box : 步进器 -->
              <u-number-box
                @change="changeCount"
                @overlimit="overLimit($event, item.goods_id)"
                :value="item.goods_count"
                :name="item.goods_id"
                bg-color="white"
                max="99"
              />
            </view>
            <!-- hover-class="none" 取消链接组件按下时的灰色样式 -->
            <!-- <navigator
              class="goods-item"
              hover-class="none"
              :url="`/goodsPackage/goods_detail/index?goods_id=${item.goods_id}`"
            > -->
            <navigator class="goods-item" hover-class="none" :url="''">
              <!-- 商品图片 -->
              <image
                class="goods-image"
                :src="item.goods_small_logo"
                mode="aspectFit"
              />
              <!-- 商品信息 -->
              <view class="goods-info">
                <view class="goods-name">{{ item.goods_name }}</view>
                <view class="goods-price">{{ item.goods_price }}</view>
              </view>
            </navigator>
          </view>
        </u-swipe-action-item>
      </u-swipe-action>
    </view>
    <!-- 底部操作栏占位 -->
    <view class="bottom-bar">
      <!-- 固定定位的操作栏  -->
      <view class="bottom-bar-fixed">
        <view class="select">
          <radio
            @click="toggleSelectd"
            class="select-radio"
            :checked="isAllSelectd"
            color="#eea427"
          >
            全选
          </radio>
          <text class="select-radio"></text>
        </view>
        <!-- 合计 -->
        <view class="total">
          <text class="total-name">合计：</text>
          <text class="total-price">{{ "¥" + selectListPrice }}</text>
        </view>
        <!-- 结算 -->
        <!-- <view class="account" @click="gotoPay"
          >去结算({{ selectListCount + "件" }})</view
        >
      </view> -->
        <view class="account" @click="gotoPay">去结算</view>
      </view>
    </view>
    <!-- 空状态 -->
    <u-empty
      v-if="!cartList.length"
      mode="car"
      icon="http://cdn.uviewui.com/uview/empty/car.png"
    >
      <template>
        <navigator
          url="/pages/category/index"
          open-type="switchTab"
          hover-class="navigator-hover"
        >
          <button size="mini" type="primary" style="margin-top: 10px">
            查看更多商品
          </button>
        </navigator>
      </template>
    </u-empty>
  </view>
</template>

<script>
import { mapGetters, mapState } from "vuex";
export default {
  name: "cart",
  data() {
    return {
      options: [
        {
          text: "删除",
          style: {
            backgroundColor: "#f56c6c",
          },
        },
      ],
      cartList: [
        {
          goods_count: 3,
          goods_id: 43016,
          goods_name: "两大一小亲子票",
          goods_price: 3099,
          goods_select: false,
          goods_small_logo:
            "https://img1.baidu.com/it/u=959086722,527018444&fm=253&fmt=auto&app=138&f=JPEG",
        },
        {
          goods_count: 3,
          goods_id: 43018,
          goods_name: "两大一小亲子票",
          goods_price: 3099,
          goods_select: false,
          goods_small_logo:
            "https://img1.baidu.com/it/u=959086722,527018444&fm=253&fmt=auto&app=138&f=JPEG",
        },
      ],
    };
  },
  onLoad() {
    // this.cartList[0].goods_count = 111
    console.log(this.$store.state.cartList);
  },
  computed: {
    // ...mapState({
    //   cartList: (state) => JSON.parse(JSON.stringify(state.cartList)),
    // }),
    ...mapGetters([
      "isAllSelectd",
      "selectList",
      "selectListCount",
      "selectListPrice",
    ]),
  },
  methods: {
    goback() {
      uni.navigateBack();
    },
    // 去结算
    gotoPay() {
      if (this.selectListCount) {
        uni.navigateTo({
          url: "/goodsPackage/pay/index",
        });
      } else {
        uni.showToast({
          title: "请添加商品",
          icon: "error",
        });
      }
    },
    // 是否全选
    toggleSelectd() {
      const cartList = this.cartList;
      const isAllSelectd = !this.isAllSelectd;
      // 更改每次选中状态
      cartList.forEach((item) => {
        item.goods_select = isAllSelectd;
      });
      // 更新 vuex
      this.$store.commit("updateCartList", cartList);
    },
    changeSelect(id) {
      // 获取购物车原有数据
      const cartList = this.cartList;
      // 获取当前 点击 radio的下标
      const index = cartList.findIndex((item) => item.goods_id === id);
      // console.log(index);
      // 更改选择的状态
      cartList[index].goods_select = !cartList[index].goods_select;
      // 更新 vuex
      this.$store.commit("updateCartList", cartList);
    },
    // 步进器变化事件 绑定change事件
    changeCount({ value, name }) {
      // 获取购物车原有数据
      const cartList = this.cartList;
      // console.log(value,name);
      // 查找商品是否在购物车里面
      const index = cartList.findIndex((item) => item.goods_id === name);
      // console.log(index);
      // 更新对应下标的数据
      cartList[index].goods_count = value;
      // 更新 vuex
      this.$store.commit("updateCartList", cartList);
    },
    // 超过步进器阀值就删除
    async overLimit(type, id) {
      // console.log(type);
      // 如果是超出了最小值类型
      if (type === "minus") {
        const [error, res] = await uni.showModal({
          title: "提示",
          content: "确认删除吗",
          confirmText: "删除",
          confirmColor: "#f00",
        });
        if (!error) {
          // 如果按了删除键
          if (res.confirm) {
            // 删除商品
            this.delList(id);
          }
        }
      }
    },
    // 删除功能
    delList(id) {
      // 获取购物车已有数据
      const cartList = this.cartList;
      // 获取下标
      const index = cartList.findIndex((item) => item.goods_id === id);
      // console.log(index);
      // 删除元素
      cartList.splice(index, 1);
      // 更新vuex
      this.$store.commit("updateCartList", cartList);
    },
    // 滑动删除
    swiperItemClick({ name }) {
      // console.log(name); // 点击的id值
      // 调用删除
      this.delList(name);
    },
  },
};
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}
.content {
  font-family: "Poppins";
}
page {
  background-color: #f5f5f5;
}

::v-deep .u-navbar__placeholder {
  height: 80rpx !important;
}

::v-deep .u-number-box__minus {
  width: 40rpx !important;
  height: 40rpx !important;
  border-radius: 50% !important;
}

::v-deep .u-number-box__plus {
  width: 40rpx !important;
  height: 40rpx !important;
  border-radius: 50% !important;
}

.hander {
  height: 60rpx;
  padding: 0rpx 30rpx;
  color: #4a4543;
  font-size: 36rpx;
  font-weight: 600;
}

.goback {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}

// 商品列表
.goods-list {
  width: 95%;
  margin: 0 auto;
  background-color: #f5f5f5;

  ::v-deep .u-swipe-action-item {
    margin: 20rpx 0;
    // border-radius: 20rpx;
  }
  .goods-item {
    display: flex;
    padding: 0rpx 20rpx 20rpx 20rpx;

    .goods-image {
      width: 190rpx;
      height: 190rpx;
      border-radius: 20rpx;
    }

    .goods-info {
      flex: 1;
      font-size: 24rpx;
      // 垂直方向两端对齐
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      padding: 15rpx 20rpx;

      .goods-name {
        // 多行超出隐藏
        font-size: 30rpx;
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }

      .goods-gg {
        color: #777;
      }

      .goods-price {
        color: #eea427;

        // 前面的价格符号
        &::before {
          content: "￥";
          font-size: 80%;
          margin-right: 5rpx;
        }
      }
    }
  }
}

// 购物车列表项
.cart-item {
  margin-top: 20rpx;
  width: 95%;
  border-radius: 10rpx;
  display: flex;
  padding-right: 5px;
  align-items: center;
  padding-left: 20rpx;
  border-bottom: 1rpx solid #ddd;
  position: relative;

  ::v-deep .u-number-box__minus {
    width: 40rpx;
    height: 40rpx !important;
    border-radius: 50%;
    // background-color: white;
    border: 1rpx solid #dfe4e4;
  }

  ::v-deep .u-number-box__minus--disabled {
    border: 1rpx solid #dfe4e4;

    .u-icon__icon {
      color: #999999 !important;
    }
  }

  ::v-deep .uni-input-input {
    background-color: white;
  }

  ::v-deep .u-number-box__plus {
    width: 40rpx;
    height: 40rpx !important;
    border-radius: 50%;
    background: #eea427 !important;

    .u-icon__icon {
      color: white !important;
    }
  }

  // 清除最后一项的底边
  &:last-child {
    border-bottom: none;
  }

  // 步进器外层盒子，定位实现
  .cart-count {
    position: absolute;
    // 体验优化细节：扩大盒子范围，防止用户误操作
    // background-color: pink;
    padding: 20rpx;
    bottom: 0;
    right: 0;
  }
}

// 底部操作栏
.bottom-bar {
  // 占位用
  height: 100rpx;

  // 定位的操作栏
  .bottom-bar-fixed {
    height: 80rpx;
    position: fixed;
    z-index: 99;
    left: 0;
    right: 0;
    bottom: var(--window-bottom);
    // /* #ifdef H5 */
    // bottom: 50px;
    // /* #endif */

    border-top: 1px solid #eee;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 0 20rpx;

    .select {
      .select-radio {
        font-size: 24rpx;
        color: #999;
      }
    }

    .total {
      flex: 1;
      display: flex;
      align-items: center;
      margin-left: 30%;

      .total-name {
        font-size: 24rpx;
      }

      .total-price {
        color: #eea427;
      }
    }

    .account {
      background-color: #eea427;
      color: #fff;
      font-size: 22rpx;
      width: 150rpx;
      height: 52rpx;
      border-radius: 26rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>